<template>
  <div class="home-page">
    <!-- 搜索 -->
    <div class="search ift-search" @click="search"></div>
    <!-- 轮播图 -->
    <div class="Rotationchart">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in lbt" :key="index"
          ><img :src="item" alt="" @click="details(item.id)"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 排行 -->
    <div class="list">
      <div class="imgs"></div>
      <div class="Ranking">
        <div>
          <div class="RankingImg" @click="RankingList"></div>
          排行
        </div>
        <div>
          <div class="classificationImg" @click="classification"></div>
          分类
        </div>
        <div>
          <div class="bookshelfImg"></div>
          书架
        </div>
      </div>
    </div>
    <!-- 小编私藏推荐 -->
    <div class="free">
      <div class="ExclusiveBenefitsOfMengxin">
        <div>小编私藏推荐</div>
        <p @click="Recommended">更多</p>
      </div>
      <div class="images">
        <div
          class="degree-of-heat"
          v-for="(item, index) in image"
          :key="index"
          @click="details(item.id)"
        >
          <div class="img">
            <img :src="item.url" alt="" />
            <div>
              <h2>{{ item.name }}</h2>
              <p>{{ item.classification }}</p>
            </div>
          </div>
          <div class="Number-of-people">
            <span class="iconfont icon-icon"></span>{{ item.people }}
          </div>
        </div>
      </div>
    </div>
    <!-- 最近新作·抢先看 -->
    <div class="free">
      <div class="ExclusiveBenefitsOfMengxin">
        <div>最近新作·抢先看</div>
        <p @click="Recommended">更多</p>
      </div>
      <div class="images">
        <div
          class="degree-of-heat"
          v-for="(item, index) in image"
          :key="index"
          @click="details(item.id)"
        >
          <div class="img">
            <img :src="item.url" alt="" />
            <div>
              <h2>{{ item.name }}</h2>
              <p>{{ item.classification }}</p>
            </div>
          </div>
          <div class="Number-of-people">
            <span class="iconfont icon-icon"></span>{{ item.people }}
          </div>
        </div>
      </div>
    </div>
    <!-- 人气爆款看过瘾 -->
    <div class="free">
      <div class="ExclusiveBenefitsOfMengxin">
        <div>人气爆款看过瘾</div>
        <p @click="Recommended">更多</p>
      </div>
      <div class="images">
        <div
          class="degree-of-heat"
          v-for="(item, index) in image"
          :key="index"
          @click="details(item.id)"
        >
          <div class="img">
            <img :src="item.url" alt="" />
            <div>
              <h2>{{ item.name }}</h2>
              <p>{{ item.classification }}</p>
            </div>
          </div>
          <div class="Number-of-people">
            <span class="iconfont icon-icon"></span>{{ item.people }}
          </div>
        </div>
      </div>
    </div>
    <!-- 特别推荐·经典回顾 -->
    <div class="selected">
      <div class="ExclusiveBenefitsOfMengxin">
        <div>特别推荐·经典回顾</div>
        <p>更多</p>
      </div>
      <div class="image">
        <div
          class="imgs"
          v-for="(item, index) in sele"
          :key="index"
          @click="details(item.id)"
        >
          <div>
            <img :src="item.url" alt="" />
          </div>
          <h2>{{ item.name }}</h2>
          <h3>{{ item.introduce }}</h3>
        </div>
      </div>
    </div>
    <!-- 一代天骄，笑傲苍穹 -->
    <div class="selected">
      <div class="ExclusiveBenefitsOfMengxin">
        <div>一代天骄，笑傲苍穹</div>
        <p>更多</p>
      </div>
      <div class="image">
        <div
          class="imgs"
          v-for="(item, index) in Tianjiao"
          :key="index"
          @click="details(item.id)"
        >
          <div>
            <img :src="item.url" alt="" />
          </div>
          <h2>{{ item.name }}</h2>
          <h3>{{ item.introduce }}</h3>
        </div>
      </div>
    </div>
    <!-- 重生复仇，要你好看 -->
    <div class="be-reborn">
      <div class="ExclusiveBenefitsOfMengxin">
        <div>一代天骄，笑傲苍穹</div>
        <p>更多</p>
      </div>
      <div class="image">
        <div
          class="imgs"
          v-for="(item, index) in reborn"
          :key="index"
          @click="details(item.id)"
        >
          <div>
            <img :src="item.url" alt="" />
          </div>
          <h2>{{ item.name }}</h2>
        </div>
      </div>
    </div>
    <div class="botto">主人没有更多了呢</div>
    <div class="dy"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      image: [
        {
          id: 1,
          url: "https://image.yqmh.com/mh/25934.jpg-300x400.webp",
          name: "斗破苍穹",
          classification: "热血",
          people: 11111,
        },
        {
          id: 2,
          url: "https://image.yqmh.com/mh/17745.jpg-300x400.webp",
          name: "凤逆天下",
          classification: "热血",
          people: 11111,
        },
        {
          id: 3,
          url: "https://image.yqmh.com/mh/107271.jpg-300x400.webp",
          name: "绝世战魂",
          classification: "热血",
          people: 11111,
        },
        {
          id: 4,
          url: "https://image.yqmh.com/mh/108246.jpg-300x400.webp",
          name: "她来了，请趴下",
          classification: "热血",
          people: 11111,
        },
        {
          id: 5,
          url: "https://image.yqmh.com/mh/108693.jpg-300x400.webp",
          name: "你一笑就甜倒我八颗牙",
          classification: "热血",
          people: 11111,
        },
        {
          id: 6,
          url: "https://image.yqmh.com/mh/108632.jpg-300x400.webp",
          name: "龙腾战尊",
          classification: "热血",
          people: 11111,
        },
      ],
      lbt: [
        "https://cms.samanlehua.com/cms/chendan/789f04b0-2007-11ec-aefa-83cb1c83dccc.jpeg-noresize.webp",
        "https://cms.samanlehua.com/cms/chendan/c4a21390-3d10-11ec-8226-41a122f72483.jpeg-noresize.webp",
        "https://cms.samanlehua.com/cms/chendan/d31fcb10-3d10-11ec-8226-41a122f72483.jpeg-noresize.webp",
        "https://cms.samanlehua.com/cms/chendan/dde2c480-3d10-11ec-8226-41a122f72483.jpeg-noresize.webp",
        "https://cms.samanlehua.com/cms/chendan/ed04d250-3d10-11ec-9aa2-c999b1672f22.jpeg-noresize.webp",
        "https://cms.samanlehua.com/cms/chendan/f34bea40-566f-11ec-8226-41a122f72483.jpeg-noresize.webp",
      ],
      sele: [
        {
          name: "凤逆天下",
          introduce: "废物嫡女的逆袭之路",
          id: 1,
          url: "https://cms.samanlehua.com/cms/hetao/4bdf1ae0-9418-11ea-884c-d554119eec0f.jpg-noresize.webp",
        },
        {
          name: "逆天邪神",
          introduce: "一代邪神，君临天下！",
          id: 1,
          url: "https://cms.samanlehua.com/cms/hetao/5ce503e0-9418-11ea-884c-d554119eec0f.jpg-noresize.webp",
        },
        {
          name: "花千骨",
          introduce: "师傅，你可曾爱过小骨",
          id: 1,
          url: "https://cms.samanlehua.com/cms/hetao/794d5aa0-9418-11ea-a950-d94c28d688bf.jpg-noresize.webp",
        },
        {
          name: "斗破苍穹",
          introduce: "斗气的世界，谁与争锋",
          id: 1,
          url: "https://cms.samanlehua.com/cms/hetao/3407e500-9418-11ea-8038-a54e2ecb8c98.jpg-noresize.webp",
        },
      ],
      Tianjiao: [
        {
          name: "谐帝为尊",
          introduce: "修仙套路深，谐帝无敌为尊！",
          id: 211,
          url: "https://cms.samanlehua.com/cms/chendan/4e8fc3c0-baab-11ea-aa40-d5abd4a3c620.png-noresize.webp",
        },
        {
          name: "都市至尊系统",
          introduce: "神级系统玩转古玩市场",
          id: 212,
          url: "https://cms.samanlehua.com/cms/chendan/158c5820-48e2-11eb-90e9-030540dc63f6.png-noresize.webp",
        },
        {
          name: "逆天战神",
          introduce: "逆天而起，誓要杀遍天下负我者！",
          id: 213,
          url: "https://cms.samanlehua.com/cms/chendan/637abfc0-d210-11ea-958a-e5d0e60da818.png-noresize.webp",
        },
        {
          name: "万古神王",
          introduce: "斩诸天神主，灭千古君皇，此生我将为王",
          id: 214,
          url: "https://cms.samanlehua.com/cms/chendan/838877d0-d210-11ea-acef-df0e5a0e6535.png-noresize.webp",
        },
      ],
      reborn: [
        {
          name: "万界神主",
          introduce: "修仙套路深，谐帝无敌为尊！",
          id: 211,
          url: "https://image.yqmh.com/mh/106454_2_1.jpg-400x200.webp",
        },
        {
          name: "独步逍遥",
          introduce: "神级系统玩转古玩市场",
          id: 212,
          url: "https://image.yqmh.com/mh/107460_2_1.jpg-400x200.webp",
        },
        {
          name: "神武帝尊",
          introduce: "逆天而起，誓要杀遍天下负我者！",
          id: 213,
          url: "https://image.yqmh.com/mh/107965_2_1.jpg-400x200.webp",
        },
        {
          name: "巅峰预言帝",
          introduce: "斩诸天神主，灭千古君皇，此生我将为王",
          id: 214,
          url: "https://image.yqmh.com/mh/108201_2_1.jpg-400x200.webp",
        },
      ],
    };
  },
  methods: {
    RankingList() {
      this.$router.push("/RankingList");
    },
    classification() {
      this.$router.push("/classifi");
    },
    Recommended() {
      this.$router.push("/homePage/Recommended");
    },
    search() {
      this.$router.push("/homePage/search");
    },
    details(id) {
      this.$router.push({ name: "details", query: { id: id } });
    },
  },
};
</script>
<style lang="less">
.home-page {
  width: 100%;
  height: 100vh;
  .search {
    width: 35px;
    height: 35px;
    color: #fc6976;
    line-height: 35px;
    position: fixed;
    border-radius: 50%;
    z-index: 100;
    text-align: center;
    background-color: white;
    top: 10px;
    right: 10px;
    font-size: 20px;
  }
  .Rotationchart {
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;
      img {
        width: 100%;
      }
    }
  }
  .list {
    position: relative;
    height: 15%;
    .imgs {
      position: absolute;
      width: 100%;
      height: 30%;
      top: -30%;
      background-image: url(../assets/icon_cat_ear.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .Ranking {
      height: 70%;
      display: flex;
      justify-content: space-around;
      text-align: center;
      padding: 15px 0;
      div {
        font-size: 14px;
        width: 18%;
        font-weight: 400;
        color: #666;
        div {
          width: 100%;
          height: 100%;
        }
        .RankingImg {
          background-image: url(../assets/25933.jpg-noresize.webp);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .classificationImg {
          background-image: url(../assets/25935.jpg-noresize.webp);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .bookshelfImg {
          background-image: url(../assets/25937.jpg-noresize.webp);
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }
  .free {
    .ExclusiveBenefitsOfMengxin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      div {
        font-size: 22px;
        font-weight: 600;
        color: #645d5a;
      }
      p {
        font-size: 14px;
        color: #999;
        font-weight: 400;
      }
    }
    .images {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      .degree-of-heat {
        width: 28%;
        font-size: 14px;
        margin-bottom: 5%;
        .img {
          position: relative;
          img {
            width: 100%;
          }
          div {
            position: absolute;
            bottom: 0;
            width: 90%;
            padding: 0px 5% 5px;
            background-color: rgba(246, 246, 246, 0.9);
            p,
            h2 {
              margin: 0;
              font-weight: 500;
            }
            h2 {
              font-size: 14px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            p {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .Number-of-people {
          padding: 0 2px;
          color: #999;
          font-size: 12px;
          span {
            margin-right: 2px;
          }
        }
      }
    }
  }
  .selected {
    margin: 0 auto 2%;
    .ExclusiveBenefitsOfMengxin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      div {
        font-size: 22px;
        font-weight: 600;
        color: #645d5a;
      }
      p {
        font-size: 14px;
        color: #999;
        font-weight: 400;
        margin: 0;
      }
    }
    .image {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      .imgs {
        width: 45%;
        border-radius: 5px;
        margin-bottom: 5%;
        div {
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          img {
            width: 100%;
          }
        }
        h2,
        h3 {
          font-size: 14px;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: 500;
        }
        h2 {
          padding: 5px 0;
        }
        h3 {
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
    }
  }
  .be-reborn {
    margin: 0 auto 2%;
    .ExclusiveBenefitsOfMengxin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 10px;
      div {
        font-size: 22px;
        font-weight: 600;
        color: #645d5a;
      }
      p {
        font-size: 14px;
        color: #999;
        font-weight: 400;
        margin: 0;
      }
    }
    .image {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      flex-wrap: wrap;
      .imgs {
        width: 60%;
        border-radius: 5px;
        margin-bottom: 5%;
        overflow: hidden;
        &:nth-child(2) {
          width: 30%;
          img {
            width: 200%;
          }
        }
        &:nth-child(3) {
          width: 30%;
          img {
            width: 200%;
          }
        }
        div {
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
          img {
            width: 100%;
          }
        }
        h2,
        h3 {
          font-size: 14px;
          margin: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-weight: 500;
        }
        h2 {
          padding: 5px 0;
        }
        h3 {
          font-size: 12px;
          font-weight: 400;
          color: #999;
        }
      }
    }
  }
  .botto {
    text-align: center;
    color: #ddd;
    font-size: 12px;
  }
  .dy {
    height: 70px;
  }
}
</style>
